<template>
  <div class="goodsInfo" ref="goodsInfo">
    <!-- 顶部导航栏 -->
    <van-nav-bar left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon color="#323334" name="share-o" size="22" />
      </template>
    </van-nav-bar>
    <scroller>
      <!-- 商品轮播图 -->
      <van-swipe class="my-swipe" indicator-color="#f96c2f" :autoplay="3000">
        <van-swipe-item
          @click="swipeImg(index)"
          v-for="(item,index) in goodsInfo.goodsSrc"
          :key="index"
        >
          <img :src="item" v-lazy="item" />
        </van-swipe-item>
      </van-swipe>
      <!-- 商品信息 -->
      <van-cell-group inset>
        <div class="goodArticle">
          <!-- 商品信息 -->
          <div class="goodsPrice">
            <div class="price">
              <p>{{goodsInfo.price}}</p>
              <div>
                价钱:
                <span>{{goodsInfo.bigPrice}}</span>
              </div>
            </div>
            <div class="priceNum">月销量:{{goodsInfo.count}}</div>
          </div>
          <div class="goodsTitle">{{goodsInfo.title}}</div>
        </div>
      </van-cell-group>
      <!-- 商品规格 -->
      <van-cell-group inset class="goodsSort">
        <!-- 商品分类 -->
        <div class="goodsSortItem" @click="addCart">
          <span>分类</span>
          <span>商品分类</span>
        </div>
        <!-- 优惠券 -->
        <div class="goodsSortItem" @click="showDiscount">
          <span>优惠券</span>
          <span>{{this.goodsInfo.goodsCoupon.length}} 张可用</span>
        </div>

        <div class="goodsSortItem">
          <span>保障</span>
          <span>7天无理由</span>
        </div>

        <div class="goodsSortItem">
          <span>参数</span>
          <span>品牌,分类</span>
        </div>
      </van-cell-group>
      <!-- 评论 -->
      <van-cell-group inset class="goodsComment">
        <div class="Comment">
          <p>
            <span>商品评价({{goodsInfo.goodsCommont.length}})</span>
            <!-- 评论详情 -->
            <i @click="goCommont">
              查看全部
              <van-icon name="arrow" />
            </i>
          </p>
          <!-- 评论 -->
          <div class="Commentlist" v-for="(commet,index) in CommentTwo" :key="index">
            <!-- 个人信息 -->
            <div class="CommentlistTop">
              <img :src="commet.src" />
              <div class="CommentName">
                <span>{{commet.name}}</span>
                <span>{{commet.date}}</span>
              </div>
            </div>
            <!-- 评论内容 -->
            <div class="CommentlistBottom textTow">{{commet.discuss}}</div>
          </div>
        </div>
      </van-cell-group>
      <!-- GoodsImg 商品推荐图片 -->
      <van-cell-group
        inset
        class="GoodsImg"
        v-for="(item,index) in goodsInfo.goodsSrc"
        :key="index"
      >
        <img :src="item" v-lazy="item" />
      </van-cell-group>
    </scroller>

    <!-- 底部购买部分 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon
        icon="star"
        @click="changeCollect"
        v-if="!goodsInfo.collect"
        text="收藏"
      />
      <van-goods-action-icon
        icon="star"
        @click="changeCollect"
        v-else
        color="#f96c2f"
        class="collect"
        text="已收藏"
      />
      <van-goods-action-button type="warning" @click="addCart" text="加入购物车" />
      <van-goods-action-button type="danger" @click="buyGoods" text="立即购买" />
    </van-goods-action>

    <!-- 商品购物分类 -->
    <van-popup
      @close="closePopup"
      v-model="isGoodsInfo"
      position="bottom"
      closeable
      :style="{ height: '85%' }"
    >
      <div class="InfoContent">
        <!-- 顶部 -->
        <div class="infoTop">
          <!-- 商品图片 -->
          <van-image width="70" height="70" :src="isGoodsSrc" />
          <span>{{isGoodsSortPrice}}</span>
        </div>
        <!-- 商品分类 -->
        <van-divider content-position="left">商品分类</van-divider>
        <!-- 分类一 -->
        <div class="infoSort">
          <p>{{sortTitle}}</p>
          <div class="infoSortAll">
            <div
              class="SortItem"
              :class="indexs===goodsSortActive?'sortActive':''"
              v-for="(sort,indexs) in sortSort"
              :key="sort.id"
              @click="checkedGoods(sort,indexs)"
            >{{sort.sort}}</div>
          </div>
        </div>
        <van-divider content-position="left">商品数量</van-divider>
        <!-- 商品数量 -->
        <div class="goodsNum">
          <span>商品数量:</span>
          <van-stepper v-model="goodsInfo.num" theme="round" button-size="22" disable-input />
        </div>
        <div class="goodsBtn">
          <van-button
            v-if="isInfo"
            type="primary"
            color="linear-gradient(to left bottom, #f9956a, #fa8547, #ffa76b)"
            round
            block
            @click="addCartList"
          >加入购物车</van-button>
          <van-button
            v-else
            type="primary"
            color="linear-gradient(to left bottom, #f9956a, #fa8547, #ffa76b)"
            round
            block
          >立即购买</van-button>
        </div>
      </div>
    </van-popup>

    <!-- 商品优惠券 -->
    <van-popup
      @close="coloseDiscount"
      v-model="isDiscount"
      closeable
      position="bottom"
      :style="{ height: '90%' }"
      class="popup-Dis"
    >
      <van-radio-group @change="DiscountChange" v-model="goodsInfo.CouponActive">
        <!-- 优惠券列表 -->
        <van-cell-group
          inset
          border
          class="DiscountTopMian"
          v-for="(v,i) in goodsInfo.goodsCoupon"
          :key="i"
        >
          <div class="DiscountTop">
            <!-- 优惠价格 -->
            <div class="Dis-Price">
              <span>{{v.price}}</span>
              <b>
                使用门槛
                <br />
                最低消费{{v.bigPrice}}元
              </b>
            </div>
            <!-- 优惠券名称/优惠券到期时间 -->
            <div class="Dis-Name-Date">
              <!-- 名称 -->
              <div class="Dis-Name">{{v.title}}</div>
              <!-- 到期时间 -->
              <div class="Dis-Date">
                <p>
                  <span>使用:</span>
                  {{v.newDate}}
                </p>
                <p>
                  <span>到期:</span>
                  {{v.oldDate}}
                </p>
              </div>
            </div>
            <!-- 是否被选中 -->
            <!-- <van-checkbox @change="DiscountChange(i)" v-model="v.active"  /> -->
            <van-radio :name="i" checked-color="#ee0a24"></van-radio>
          </div>
          <div class="DiscountBom"></div>
        </van-cell-group>
      </van-radio-group>
    </van-popup>
    <!-- 用户评论组件 -->
    <transition
      enter-active-class="animate__animated animate__slideInRight"
      leave-active-class="animate__animated animate__slideOutRight"
    >
      <Comment class="animated" v-if="isComment"></Comment>
    </transition>
  </div>
</template>

<script>
// 处理时间日期的组件
import moment from 'moment'
import { mapMutations } from 'vuex'

// 导入评论组件
import Comment from '@/pages/public/Comment/Comment.vue'
export default {
  name: 'YscShopGoodsinfo',
  data () {
    return {
      // 商品信息
      goodsInfo: {},
      // 商品展示两条评论
      CommentTwo: [],
      // 商品显示
      isGoodsInfo: false,
      // 默认被选中
      goodsSortActive: 0,
      // 分类标题
      sortTitle: '',
      // 分类列表
      sortSort: [],
      // 判断是否加入购物车
      isInfo: true,
      // 评论显示
      isComment: false,
      // 商品优惠券
      isDiscount: false,
      // 暂时
      checked: null,
    };
  },
  created () {
    // 获取当前点击的商品信息
    const info = JSON.parse(window.sessionStorage.getItem('goodsInfo'))
    // 赋值当前商品信息
    // console.log(info);
    this.goodsInfo = info
    // 处理商品展示两条评论
    this.goodsInfo.goodsCommont.forEach((item, index) => {
      item.date = moment(Number(item.date)).format('YYYY-MM-DD HH-MM-SS')
      if (index < 2) {
        this.CommentTwo.push(item)
      }
    })
    // 处理优惠券时间戳
    this.goodsInfo.goodsCoupon.forEach(v => {
      v.newDate = moment(Number(v.newDate)).format('YYYY-MM-DD HH:MM:SS')
      v.oldDate = moment(Number(v.oldDate)).format('YYYY-MM-DD HH:MM:SS')
    })
  },
  computed: {
    // 处理商品切换金钱
    isGoodsSortPrice () {
      return this.goodsInfo.Sort.child[this.goodsSortActive].price
    },
    // 处理当前图片
    isGoodsSrc () {
      return this.goodsInfo.goodsSrc[this.goodsSortActive]
    },
  },
  mounted () {

    // 退出评论
    this.$bus.$on('CommentBack', res => {
      this.isComment = res
    })
  },
  components: {
    Comment
  },
  methods: {
    ...mapMutations(['getGoodsCarList']),
    // 返回首页
    onClickLeft () {
      this.$router.back()
      // 更新购物车列表
      this.getGoodsCarList()
    },
    // 获取商品
    // async getGoodsInfo () {
    //   const { data: res } = await this.$http.get(`/goods`);
    //   if (res.status !== 200) return
    //   this.goodsInfo = res.data.goodsInfo
    //   // 处理商品展示两条评论
    //   this.goodsInfo.goodsCommont.forEach((item, index) => {
    //     item.date = moment(item.date).format('YYYY-MM-DD HH-MM-SS')
    //     if (index < 2) {
    //       this.CommentTwo.push(item)
    //     }
    //   })
    // },
    // 商品图片预览
    swipeImg (index) {
      this.$ImagePreview({
        images: this.goodsInfo.goodsSrc,
        showIndex: true,
        loop: false,
        startPosition: index,
      });
    },
    // 加入购物车
    addCart () {
      this.isGoodsInfo = true;
      this.isInfo = true;
      this.sortTitle = this.goodsInfo.Sort.title;
      this.sortSort = this.goodsInfo.Sort.child;
      // 动态控制滚动条购买时不显示
      this.isScroll = 'hidden';
    },
    // 直接购买
    buyGoods () {
      this.isGoodsInfo = true;
      this.sortTitle = this.goodsInfo.Sort.title;
      this.sortSort = this.goodsInfo.Sort.child;
      this.isInfo = false
      // 动态控制滚动条购买时不显示
      this.isScroll = 'hidden'
    },
    // 切换分类
    checkedGoods (sort, indexs) {
      // 切换不同商品属性
      this.goodsSortActive = indexs
      this.goodsInfo.price = sort.price
    },
    // 添加数据到购物车
    addCartList () {
      // 获取加入购物车的信息
      const GoodsCartInfo = {
        id: this.goodsInfo.id,
        src: this.isGoodsSrc,
        title: this.goodsInfo.title,
        price: this.isGoodsSortPrice,
        params: [this.goodsInfo.Sort.child[this.goodsSortActive].sort],
        Num: this.goodsInfo.num,
        active: false,
        Discount: this.checked
      };
      // 存储本地数据
      // 添加到本地存储
      const car = JSON.parse(window.localStorage.getItem('carList'));
      // 添加新数据到存储
      const isCar = car.findIndex(x => x.id === GoodsCartInfo.id)
      if (isCar !== -1) {
        this.$toast.success('重复添加成功');
        // 重复添加或从新选择
        const newGoods = {
          id: this.goodsInfo.id,
          src: this.isGoodsSrc,
          title: this.goodsInfo.title,
          price: this.isGoodsSortPrice,
          params: [this.goodsInfo.Sort.child[this.goodsSortActive].sort],
          Num: car[isCar].Num += GoodsCartInfo.Num,
          active: false,
          Discount: this.checked
        };
        // 替换原来商品
        car[isCar] = newGoods
        window.localStorage.setItem('carList', JSON.stringify(car))
        // 关闭详情
        this.isGoodsInfo = false
        return
      }
      car.push(GoodsCartInfo)
      // 从新存储
      window.localStorage.setItem('carList', JSON.stringify(car))
      // 添加成功
      this.$toast.success('添加成功');
      // 关闭详情
      this.isGoodsInfo = false

    },
    // 选中商品优惠券
    DiscountChange (e) {
      this.checked = this.goodsInfo.goodsCoupon[e]
    },
    // 关闭弹出层
    closePopup () {
      // 恢复滚动条
      this.isScroll = 'scroll'
    },
    // 评论详情
    goCommont () {
      // 评论显示
      this.isComment = true;
      // 获取评论数据
      const info = JSON.parse(window.sessionStorage.getItem('goodsInfo'))
      // info.goodsCommont
    },
    // 商品收藏
    changeCollect () {
      this.goodsInfo.collect = !this.goodsInfo.collect
    },
    // 显示优惠券
    showDiscount () {
      this.isDiscount = true
    },
    // 关闭优惠券
    coloseDiscount () {
      this.isDiscount = false
    }
  },
};
</script>

<style lang="less" scoped>
.popup-Dis {
  background-color: #f5f9fa;
}
.collect {
  color: #f96c2f !important;
}
// 默认背景
.goodsInfo {
  background-color: #f5f9fa;
}
.goodsInfo {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #f5f9fa;
  z-index: 2;
  // 顶部
  .van-nav-bar {
    width: 100%;
    position: fixed;
    z-index: 1;
    background-color: transparent;
  }
  .van-hairline--bottom::after {
    border: none;
  }
  // 商品轮播图
  .my-swipe .van-swipe-item {
    color: #fff;
    height: 270px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 商品信息
  .goodArticle {
    // height: 50px;
    font-size: 14px;
    padding: 0px 15px;
    box-sizing: border-box;
    .goodsPrice {
      display: flex;
      align-items: center;
      height: 50px;
      color: #f96c2f;
      .price {
        display: flex;
        align-items: center;
        flex: 1;
        p {
          font-size: 16px;
          flex: 35%;
          text-align: right;
          // margin-right: 10px;
          padding-right: 10px;
        }
        p::before,
        span::before {
          content: "¥";
          font-size: 10px;
        }
        div {
          flex: 65%;
          font-size: 10px;
          color: gray;
        }
        span {
          text-align: left;
          font-size: 10px;
          color: gray;
          text-decoration: line-through;
        }
      }
      .priceNum {
        flex: 1;
        text-align: right;
        font-size: 10px;
        color: #323334;
      }
    }
  }
  // 商品规格
  .goodsSort {
    margin-top: 10px;
    font-size: 12px;
    .goodsSortItem:nth-child(-n + 2) {
      height: 50px;
    }
    .goodsSortItem {
      height: 30px;
      display: flex;
      align-items: center;
      border-bottom: 0.5px solid #eee;
      span:first-child {
        flex: 15%;
        text-align: center;
        color: gray;
      }
      span:last-child {
        flex: 85%;
        font-size: 10px;
      }
    }
    .goodsSortItem:nth-child(-n + 2) span:last-child::after {
      content: ">";
      position: absolute;
      right: 20px;
      color: gray;
    }
  }
  // 评论
  .goodsComment {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px 15px;

    .Comment {
      font-size: 12px;
      p {
        border-bottom: 0.5px solid #eee;
        display: flex;
        height: 40px;
        justify-content: space-between;
        align-items: center;
        i {
          font-size: 10px;
        }
      }
      // 个人信息
      .Commentlist {
        border-bottom: 0.5px solid #eee;
        margin-bottom: 5px;
        .CommentlistTop {
          display: flex;
          align-items: center;
          margin-top: 5px;
          img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            margin-right: 5px;
          }
          .CommentName {
            display: flex;
            flex-direction: column;
            padding-left: 10px;
            span:first-child {
              font-size: 14px;
            }
            span:last-child {
              color: gray;
              font-size: 10px;
            }
          }
        }
        // 评论内容
        .CommentlistBottom {
          padding: 15px 0px;
        }
      }
    }
  }
  // 商品推荐图片
  .GoodsImg {
    img {
      width: 100%;
      height: 300px;
    }
  }
  .GoodsImg:nth-child(n + 2) {
    margin-top: 10px;
  }
  .GoodsImg:last-child {
    margin-bottom: 100px;
  }
  // 底部购买部分
  .van-goods-action {
    border-top: 1px solid #ddd;
    padding-bottom: 20px;
    padding-top: 5px;
  }
  // 商品购物
  .InfoContent {
    padding: 0px 15px;
    padding-top: 10px;
    .infoTop {
      .van-image {
        border-radius: 5px;
        overflow: hidden;
        vertical-align: middle;
      }
      span::before {
        content: "¥";
        font-size: 14px;
        margin-left: 5px;
        padding-right: 3px;
      }
      span {
        font-size: 18px;
        color: #f96c2f;
      }
    }
    .van-divider {
      margin-bottom: 0px;
    }
    // 商品分类
    .infoSort {
      font-size: 14px;
      p {
        color: #969799;
        font-size: 12px;
        margin: 10px 0px;
      }
      .infoSortAll {
        display: flex;
        flex-wrap: wrap;
        .SortItem {
          font-size: 12px;
          padding: 2px 10px;
          margin: 5px 10px 5px 0px;
          border: 1px solid #868788;
          color: #868788;
          border-radius: 3px;
        }
      }
    }
    .goodsNum {
      display: flex;
      height: 50px;
      align-items: center;
      justify-content: space-between;
      span {
        font-size: 12px;
        color: gray;
      }
    }
    .goodsBtn {
      height: 260px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-direction: column;
      .van-button {
        width: 90%;
        display: block;
      }
    }
  }
  .sortActive {
    border-color: #f96c2f !important;
    color: #f96c2f !important;
  }
  .DiscountTopMian:first-child {
    margin-top: 40px;
  }
  .DiscountTopMian:nth-child(n + 1) {
    margin-bottom: 10px;
  }
  .DiscountTopMian {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 6px rgba(0, 0, 0, 0.04);

    .DiscountTop {
      height: 100px;
      display: flex;
      align-items: center;
      font-size: 12px;
      padding: 15px;
      box-sizing: border-box;
      .Dis-Price {
        flex: 4;
        display: flex;
        flex-direction: column;
        color: #c23616;
        span {
          font-size: 22px;
          text-align: center;
        }
        span::before {
          content: "¥";
          font-size: 16px;
          margin-right: 5px;
        }
        b {
          font-size: 8px;
          text-align: center;
          padding: 0px 10px;
        }
      }
      .Dis-Name-Date {
        flex: 6;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .Dis-Name {
          margin-bottom: 10px;
          font-size: 16px;
        }
        .Dis-Date {
          font-size: 10px;
          p {
            span {
              color: #c23616;
            }
            transform: scale(0.87) translateX(-12px);
          }
        }
      }
    }
  }
}
</style>